<template>
  <div class="bigbox">
      <div class="topbox" :style="{height:isheight+'px'}">
        <el-form :model="form" ref="form" label-position="left" label-width="80px" onsubmit="return false">
          <el-row :gutter="20">
            <el-col :span="5">
            <el-form-item label="建筑群">
              <!-- <el-select size="small" v-model="form.buildingId" style="width: 100%;" @change="changeqiye">
                <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
              </el-select> -->
              <FilterSelect2
                    v-model="form.buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqiye"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="房间">
              <!-- <el-select size="small" v-model="form.roomId" style="width: 100%;" @change="changeroom">
                <el-option v-for="(item,index) in fangjianlist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
              </el-select> -->
              <FilterSelect2
                    v-model="form.roomId"
                    :optionlist="fangjianlist"
                    @updateModelValue="changeroom"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="电表名称">
              <!-- <el-select size="small" v-model="form.meterId" style="width: 100%;">
                <el-option v-for="(item,index) in meterlist" :key="index" :label="item.meterName" :value="item.meterId" class="option"></el-option>
              </el-select> -->
              <FilterSelect2
                    v-model="form.meterId"
                    :optionlist="meterlist"
                    :valuekey="{ name: 'meterName', value: 'meterId' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
            <el-col :span="5" >
              <el-form-item label="用户余额" >
                <el-select size="small" v-model="form.balanceState" style="width: 100%;" clearable >
                  <el-option v-for="(item,index) in yuelist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="isshow">
            <el-col :span="4" style="text-align: right;">
              <el-form-item label="合闸状态">
                <!-- <el-radio-group v-model="form.brakeState">
                  <el-radio v-for="item in hezhalist" :key="item.value" :label="item.value">{{ item.text }}</el-radio>
                </el-radio-group> -->
                <el-select size="small" v-model="form.brakeState" style="width: 100%;" clearable >
                  <el-option v-for="(item,index) in hezhalist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="功率状态" >
                  <el-radio-group v-model="form.powerState">
                    <el-radio v-for="item in gonglvlist" :key="item.value" :label="item.value">{{ item.text }}</el-radio>
                  </el-radio-group>
              </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="表计类型"> 
              <el-radio-group v-model="form.meterType">
                <el-radio v-for="item in leixinglist" :key="item.value" :label="item.value">{{ item.text }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="isshow?14:4" style="text-align: right !important;">
              <!-- <div > -->
                <el-button @click="chongzhi" size="small" style=" cursor: pointer;">重 置</el-button>
                <el-button @click="getdatalist()" type="primary" size="small" style=" cursor: pointer;">查 询</el-button>
                <el-button type="text" v-if="isshow" class="shou" @click="zedie" style=" cursor: pointer;">收起 <i class="el-icon-arrow-up"></i> </el-button>
                <el-button type="text" v-else class="shou" @click="zedie" style=" cursor: pointer;">展开 <i class="el-icon-arrow-down"></i> </el-button>
              <!-- </div> -->
          </el-col>
          </el-row>
        </el-form>
     </div>
    <div class="bodybox" :style="{height:isshow?'calc(100% - 150px)':'calc(100% - 90px)'}">
      <div class="title">
        <div class="butti">
          <div>电表操控</div>
          <div style="display: flex;">
            <span style="margin-right: 10px;"><el-button @click="yuanlazha" type="primary" size="small">
              <i style="font-size: 12px;display: inline-block;
                 transform: rotate(180deg);" class="iconfont icon-kongxinjiantou-xiangshangyiheng lazha"></i>
               人工远程拉闸</el-button></span>
            <span style="margin-right: 10px;"><el-button @click="yuanhezha" type="primary" size="small"><i style="font-size: 12px;" class="iconfont icon-kongxinjiantou-xiangshangyiheng"></i> 人工远程合闸</el-button></span>
            <span style="margin-right: 10px;"><el-button @click="chaobiao" type="primary" size="small"><i style="font-size: 12px;" class="iconfont icon-chaobiao1"></i> 抄表记录</el-button></span>
            <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
      </div>
      <!-- 表格区域 -->
      <div class="table">
        <el-table
          :size="issize"
          border
          height="calc(100% - 1px)"
          :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
          v-loading="loading"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column
            type="selection"
            align="center"
            width="55">
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80">
          </el-table-column>
          <el-table-column
            prop="buildingName"
            width="200"
            label="建筑群名称">
          </el-table-column>
          <el-table-column
            prop="meterName"
            label="电表名称">
          </el-table-column>
          <el-table-column
            prop="roomName"
            label="房间名称">
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="用户名称">
          </el-table-column>
          <el-table-column
            prop="balance"
            align="right"
            width="180"
            label="剩余金额(元)">
          </el-table-column>
          <el-table-column
            prop="balanceState"
            align="center"
            label="余额状态">
            <template #default="{row}">
              <span v-if="row.balanceState=='正常'" class="states green"></span>
              <span v-else class="states red"></span>
              <span>{{ row.balanceState}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="powerThreshold"
            label="功率阈值">
          </el-table-column>
          <el-table-column
            prop="powerState"
            align="center"
            width="180"
            label="功率状态">
          </el-table-column>
          <el-table-column
          label="操作"
          width="100"
          align="center">
          <template #default="{row}">
            <el-button @click="lookbiao(row)" size="small" type="primary">
              <i style="font-size: 14px;" class="iconfont icon-zongzhangdan"></i> 抄表
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="getdatalist"
                :total="+totalCount">
        </el-pagination>
      </div>
      <!-- 抄表记录弹窗 -->
      <div class="dialog">
        <el-dialog
          title="抄表记录"
          :visible.sync="dialogVisible"
          width="45%">
          <div>
            <div style="padding-left: 10px;">
              <span>时间 </span>
              <span>
                <el-date-picker
                  :clearable="false"
                  v-model="value1"
                  size="small"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </span>
              <span style="margin-left: 10px;"><el-button @click="getfenyelist()" size="small" type="primary">查询</el-button></span>
            </div>
            <div style="margin: 10px 0;"><el-button @click="daochujilu" size="small" type="primary">导出</el-button></div>
            <!-- 表格区域 -->
            <div class="table" style="height: 400px;">
              <TableColumn
              ref="tabledata"
              :tableData="tableDatas" 
              :tableConfig="tableConfig">
              </TableColumn>
              <!-- 底部分页 -->
              <div class="fenye">
                <el-pagination
                      background
                      layout="prev, pager, next"
                      :current-page.sync="pagejilu.pageNo"
                      :page-size="20"
                      @current-change="getfenyelist"
                      :total="+totalCounts">
                </el-pagination>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button  size="small" @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 抄表弹窗 -->
      <div class="dialog">
        <el-dialog
          title="抄表详情"
          :visible.sync="dialogVisiblechaobiao"
          width="50%">
          <div style="border: 1px solid #ccc;">
             <div class="toptop">
              <div class="bgc">总(kWh)</div>
              <div class="wenzi">{{ entity.totalValue?entity.totalValue:0 }}</div>
             </div>
             <div class="toptop">
               <div class="mini">
                <div class="neibgc">尖(kWh)</div>
                <div class="neitext">{{ entity.sharpValue?entity.sharpValue:0 }}</div>
               </div>
               <div class="mini">
                <div class="neibgc">峰(kWh)</div>
                <div class="neitext">{{ entity.peakValue?entity.peakValue:0 }}</div>
               </div>
             </div>
             <div class="toptop">
               <div class="mini">
                <div class="neibgc">平(kWh)</div>
                <div class="neitext">{{ entity.flatValue?entity.flatValue:0 }}</div>
               </div>
               <div class="mini">
                <div class="neibgc">谷(kWh)</div>
                <div class="neitext">{{ entity.valleyValue?entity.valleyValue:0 }}</div>
               </div>
             </div>
             <div class="toptop">
              <div class="bgc">深谷(kWh)</div>
              <div class="wenzi">{{ entity.deepValleyValue }}</div>
             </div>
             <div class="toptop">
              <div class="bgc">抄表时间</div>
              <div class="wenzi">{{ entity.readTime }}</div>
             </div>
             <div class="toptop">
              <div class="bgc">数据时间</div>
              <div class="wenzi">{{ entity.dateTime }}</div>
             </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small"  @click="caobiaoquxiao">取 消</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 远程拉闸/合闸控制 -->
      <div class="dialog">
        <el-dialog
          title="远程控制"
          :visible.sync="dialogVisiblelazha"
          width="35%">
          <div>
            <div v-show="operateType =='SWITCH_OFF'">
              <el-steps :active="active" finish-status="success">
                <el-step title="提醒"></el-step>
                <el-step title="校验身份"></el-step>
              </el-steps>
            </div>
            <div v-if="flaglaorhe">
              <div>所选表计余额状态为 {{ tablearray[0]?.balanceState }} ,功率状态为 {{ tablearray[0]?.powerState }}</div>
              <div>是否仍对已选表计进行远程拉闸</div>
            </div>
            <div v-else>
              <el-form :model="zhaform" :rules="rules" label-position="right" label-width="70px" ref="zhaform">
              <el-row>
                <el-col :span="14">
                  <el-form-item label="联系人" prop="customerName">
                    <el-select size="small" v-model="zhaform.customerName" style="width: 100%;">
                      <el-option v-for="(item,index) in optionlist" :key="index" :label="item.CONTACTSNAME" :value="item.CONTACTSPHONE" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14">
                  <el-form-item label="验证码" prop="mobileNumber">
                    <el-input v-model="zhaform.mobileNumber" size="small" style="width: 100%;" placeholder="请输入验证码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="">
                    <template>
                      <span v-show="shownumber"><el-button type="primary" size="small" @click="huoquyanzhengma">获取验证码</el-button></span>
                      <span v-show="!shownumber"><el-button type="primary" class="getcode" disabled>{{ getnember }} 秒后重试</el-button></span>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="laorhequxiao">取 消</el-button>
            <el-button v-if="flaglaorhe" size="small"  type="primary" @click="dionesure">确 定</el-button>
            <el-button v-else  type="primary" size="small" @click="queding">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {getjianzhuqunapi} from '@/api/prwpaid/file-management/Architectural-complex'
import {gettabledatalistapi,getchaobiaolistapi,postchaobiaoapi,postheorlaapi,putcodeapi} from '@/api/prwpaid/meter-management/meter-control'
import {gettablelistapi} from '@/api/prwpaid/file-management/meter'
import {getlistapi} from '@/api/prwpaid/file-management/room'
import {getloginlistapi} from '@/api/prwpaid/file-management/Architectural-complex'
import { getzidianxialaapi } from '@/api/guidelines'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      active:0,
      lianxilist:[],
      rules: {
        customerName: [
        { required: true, message: '请选择联系人', trigger: 'blur' }
        ],
        mobileNumber: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      zhaform:{},
      dialogVisiblelazha:false,
      dialogVisiblechaobiao:false,
      tableDatas:[],
      dialogVisible:false,
      loading:false,
      isshow:false,
      form:{buildingId:'',roomId:'',meterId:'',powerState:'',brakeState:'',balanceState:'',meterType:''},
      isheight: 80,
      qiyelist: [],
      fangjianlist: [],
      meterlist: [],
      issize: 'medium',
      tableData: [],
      totalCount: '',
      pageobj: {
        pageNo: 0,
        pageSize:20
      },
      yuelist: [],
      gonglvlist: [],
      hezhalist: [],
      leixinglist: [],
      tablearray: [],
      value1: ['',''],
      totalCounts:'',
      tableConfig: [
      { label: '序号', type:'index' ,center:'center',width:'70'},
      { label: '抄表时间', prop: 'time' ,center:'center',width:'180'},
      { label: '用户名称', prop: 'customerName' ,width:'180'},
      { label: '房间名称', prop: 'roomName' ,width:'120'},
      { label: '电表名称', prop: 'meterName' ,width:'150'},
      { label: '总示数(kWh)', prop: 'totalValue' ,width:'150'},
      { label: 'CT', prop: 'ct' ,width:'80'},
      { label: 'PT', prop: 'pt' ,width:'80'},
      { label: '尖示数(kWh)', prop: 'sharpValue' ,width:'150'},
      { label: '峰示数(kWh)', prop: 'peakValue' ,width:'150'},
      { label: '平示数(kWh)', prop: 'flatValue' ,width:'150'},
      { label: '谷示数(kWh)', prop: 'valleyValue' ,width:'150'},
      { label: '深谷示数(kWh)', prop: 'deepValleyValue' ,width:'150'},
      { label: '失败原因', prop: 'failReason',width:'180' },
      ],
      pagejilu: {
        pageNo: 1,
        pageSize:20
      },
      entity: {},
      operateType: '',
      flaglaorhe: true,
      optionlist: [],
      shownumber: true,
      getnember: 60,
      timer:null
    };
  },

  async mounted() {
    await this.geizhidianarr()
    this.getdatalist()
  },

  methods: {
       // 企业下拉
    async changeqiye(val) {
      //获取房间
    const room = await getlistapi({
      pageNo: 0,
      pageSize: 500,buildingNo:'',
      buildingId:val
    })
    this.fangjianlist = room.data.list
      localStorage.setItem('buildingId', val)
    },
    // 房间下拉
    async changeroom(val) {
      this.form.meterId=''
      // 获取表计
      const meter = await gettablelistapi({ buildingId:this.form.buildingId,roomId:val,name:'',gatewayName:'',status:'', pageNo:0, pageSize: 500 })
      this.meterlist=meter.data.list
    },
    // 人工远程拉闸
    yuanlazha() {
      if (!this.tablearray.length) return this.$message.warning('请先选择数据')
      if(this.tablearray.length>1) return this.$message.warning('人工远程拉闸仅支持单项数据操作')
      this.dialogVisiblelazha = true
      this.flaglaorhe=true
      this.operateType = 'SWITCH_OFF'
    },
    // 人工远程合闸
    yuanhezha() {
      this.flaglaorhe=false
      if (!this.tablearray.length) return this.$message.warning('请先选择数据')
      if(this.tablearray.length>1) return this.$message.warning('人工远程合闸仅支持单项数据操作')
      this.dialogVisiblelazha = true
      this.operateType = 'SWITCH_ON'
    },
    //拉闸/合闸确定
    async queding() {
      await this.$refs.zhaform.validate()
      await postheorlaapi({
        verifyCode: this.zhaform.mobileNumber, operateType:this.operateType,
        contactPhone:this.zhaform.customerName,measuringPointId:this.tablearray[0].measuringPointId
      }).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message: res.message
        })
      })
      this.laorhequxiao()
    },
    // 抄表取消
    caobiaoquxiao() {
      this.entity={}
      this.dialogVisiblechaobiao = false
    },
    // 获取验证码
    async huoquyanzhengma() {
      if (!this.zhaform.customerName) return this.$message.warning('请先选择联系人')
      this.shownumber = false
      this.setInter()
      await putcodeapi({
        mobileNumber: this.zhaform.customerName,
        customerId:this.tablearray[0].customerId,
        buildingId:this.tablearray[0].buildingId,
        customerName:this.tablearray[0].customerName,
      }).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message: res.code == 200 ? '获取验证码成功':res.message
        })
      })
    },
    // 定时器
    setInter() {
      this.timer = setInterval(() => {
        this.getnember--
        if (this.getnember == 0) {
          this.shownumber=true
          this.getnember = 60
          clearInterval(this.timer);
        }
      },1000)
    },
    // 拉闸/合闸取消
    laorhequxiao() {
      this.active = 0
      this.dialogVisiblelazha = false
      this.zhaform = {}
      // this.$refs.zhaform.resetFields()
    },

    dionesure() {
      this.active = 1
      this.flaglaorhe=false
    },
    // 抄表
    async lookbiao(row) {
      this.dialogVisiblechaobiao = true
      const {data:{entity}} = await postchaobiaoapi({
        accountId: row.accountId,measuringPointId:row.measuringPointId,
        buildingId: row.buildingId,meterId:row.meterId,
        customerId: row.customerId, meterType: row.meterType,
        roomId:row.roomId
      })
      this.entity=entity
    },
    // 查看抄表记录
    chaobiao() {
      if (this.tablearray.length == 0) return this.$message.warning('请先选择数据')
      if(this.tablearray.length>1) return this.$message.warning('抄表记录仅支持单选查询')
      this.dialogVisible = true
      this.getfenyelist()
    },
    // 导出抄表记录
    daochujilu() {
      const object=this.tablearray[0]
      exportexcel('mbm-microservice-biz/mbm/meter/control/exportReadExcel', {
        customerName: object.customerName,
        measuringPointId: object.measuringPointId,
        meterName: object.meterName,
        roomName: object.roomName,
        startDate: this.value1[0]?this.value1[0]:'', endDate: this.value1[1]?this.value1[1]:'',
      },'抄表记录')
    },
    // 获取抄表记录数据
    async getfenyelist() {
      const object=this.tablearray[0]
      const {data:{list,totalCount}} = await getchaobiaolistapi({
        customerName: object.customerName,
        measuringPointId: object.measuringPointId,
        meterName: object.meterName,
        roomName: object.roomName,
        startDate: this.value1[0]?this.value1[0]:'', endDate: this.value1[1]?this.value1[1]:'',
        pageNo:this.pagejilu.pageNo-1,pageSize:this.pagejilu.pageSize
      })
      this.tableDatas = list
      this.totalCounts = totalCount
    },
    // 获取表格数据
    async getdatalist() {
      this.loading=true
      const { data: { list, totalCount } } = await gettabledatalistapi({...this.form,pageNo:this.pageobj.pageNo-1,pageSize: this.pageobj.pageSize,})
      this.tableData = list
      this.totalCount=totalCount
     this.loading=false
    },
    // 表格点击事件
    handleSelectionChange(val) {
      this.tablearray=val
    },
    // 重置
    chongzhi() {
      // localStorage.removeItem('buildingId');
      this.form = { buildingId: '', roomId: '', meterId: '', powerState: '', brakeState: '', balanceState: '', meterType: '' }
      const localbuildingId = localStorage.getItem('buildingId')
      const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
      if (isBuildIdInArray) {
        this.$set(this.form,'buildingId',localbuildingId)
      } else {
        this.$set(this.form,'buildingId',this.qiyelist[0].id)
        
      }
      this.getdatalist()
    },
    // 导出
   daochu() {
      exportexcel('mbm-microservice-biz/mbm/meter/control/exportExcel',{...this.form},'表计控制')
    },
    // 刷新列表
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 折叠导航栏
    zedie () {
      this.isshow = !this.isshow
      if (this.isshow) {
        this.isheight = 140
      } else {
        this.isheight = 80
      }
    },
    // 获取字典接口
   async geizhidianarr() {
    // 获取建筑群
    const res = await getloginlistapi()
     this.qiyelist = res.data.list
     const localbuildingId = localStorage.getItem('buildingId')
     const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.form.buildingId = localbuildingId ? localbuildingId : ''
    }else{
      this.form.buildingId=''
    }

           //获取房间
    const room = await getlistapi({
      pageNo: 0,
      pageSize: 500,
      buildingId:this.form.buildingId
    })
    this.fangjianlist = room.data.list
    // 获取余额状态
    const yue = await getzidianxialaapi({ dictType: 'MBM_BALANCE_TYPE' })
    this.yuelist = yue.data.list
    // 获取功率状态
    const gonglv = await getzidianxialaapi({ dictType: 'MBM_POWER_STATUS' })
    this.gonglvlist = gonglv.data.list
    // 获取合闸状态
    const hezha = await getzidianxialaapi({ dictType: 'MBM_METER_STATUS' })
     this.hezhalist = hezha.data.list
     // 获取表计类型
     const leixing = await getzidianxialaapi({ dictType: 'MBM_ENERGY_TYPE' })
    this.leixinglist = leixing.data.list
    }
  },
  watch: {
    async dialogVisiblelazha(val) {
      if (val) {
        const { data: { entity } } = await getjianzhuqunapi({ buildingsId: this.tablearray[0].buildingId })
        this.optionlist = JSON.parse(entity.contactsInfos)
        this.optionlist.forEach(ele => {
          ele.CONTACTSNAME=ele.CONTACTSNAME+' '+ele.CONTACTSPHONE
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    background-color: #fff;
    padding: 20px 20px 0 20px;
    margin-bottom: 10px;
      .chaxun{
        background-color: #1890ff;
        color: #fff;
      }
      .shou{
        color: #1890ff;
        border: none;
        background-color: #fff;
      }
  }
  .bodybox{
    background-color: #fff;
    padding: 20px;
    .butti{
      display: flex;
      justify-content: space-between;
    }
    .table{
      height: 89%;
      margin: 10px 0;
      .states{
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
        border-radius: 50%;
      }
      .red{
        background-color:red;
      }
      .green{
        background-color: #13ce66;
      }
    }
    .fenye{
      text-align: right;
    }
    .dialog{
      .getcode{
        width: auto;
        height: 30px;
        padding: 0 10px;
        border-radius: 3px;
        color: #fff;
        border: none;
        
        margin-left: 10px;
      }
      .getcodes{
        background-color: #3b8eea;
      }
      .toptop{
        display: flex;
        height: 45px;
        line-height: 45px;
        .bgc{
          width: 150px;
          background-color: #f1f1f1;
          border: 1px solid #ccc;
          padding-left: 20px;
        }
        .wenzi{
          flex: 1;
          border: 1px solid #ccc;
          padding-left: 20px;
        }
        .mini{
          width: 50%;
          display: flex;
          .neibgc{
            width: 150px;
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            padding-left: 20px;
          }
          .neitext{
            flex: 1;
            border: 1px solid #ccc;
            padding-left: 20px;
          }
        }
      }
    }
  }
}
// ::v-deep .el-input__inner{
//   height: 30px;
// }
// ::v-deep .el-radio{
//   margin-right: 15px;
// }
// ::v-deep .el-dialog__footer{
//   text-align: center;
// }
// ::v-deep .el-form-item__error{
//   padding-top: 0 !important;
//   font-size: 10px;
// }

</style>